<template>
    <div class="top">机构指标映射</div>
    <div class="box">
        <div class="shuju">数据筛选</div>
        <div class="caozuo">
            <div style="width:75px;
                                 height: 35px;
                                 font-family: '微软雅黑';
                                 font-weight: 400;
                                 font-style: normal;
                                 margin-left: 10px;
                                 line-height: 70px; ">
                <p style="width: 75px;height: 35px; ">
                    <span style="width: 50px;height: 17.3296px; font-size: 13px;">输入查询：</span>
                </p>
            </div>
            <div style="width: 180px;height: 35px;  line-height: 70px; ">
                <input style="width: 180px;height: 35px;border: 1px solid #d7d7d7; line-height: 35px; padding-left: 10px;"
                    type="text" placeholder="指标名称" v-model="tiaojian" />
            </div>
            <p style="width: 65px;height:35px;
                                font-family: '微软雅黑';
                                margin-left:15px;
                                font-weight: 400;
                                line-height: 70px; 
                                font-size: 13px ">
                体检机构：
            </p>
            <div class="xuanze">
                <el-select v-model="jigoleixing" class="m-2" placeholder="全部" size="small">
                    <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <p style="width: 105px;height:35px;
                                font-family: '微软雅黑';
                                margin-left:50px;
                                font-weight: 400;
                                line-height: 70px; 
                                font-size: 13px ">
                指标映射状态：
            </p>
            <div class="xuanze">
                <el-select v-model="types" class="m-2" placeholder="全部" size="small">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="right-box">
                <el-button type="primary" color="#0079fe" @click="inquireabout">查询</el-button>
                <el-button color="#ffffff" class="reset" @click="removecall">重置</el-button>
            </div>
        </div>
    </div>
    <div class="biao">
        <div class="anniu">
            <input type="button" value="添加" @click="dialogFormVisible1"  >
            <el-dialog v-model="dialogFormVisible" title="新增体检机构" width="1003px" modal="true" align-center="true"
                style="margin-top: 30px;">
                <!-- 添加的 -->
                <div class="dialog">
                    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                        :size="formSize">
                        <div style=" width: 1003px;;height: 339.92px;">
                            <!-- input框 -->
                            <div class="le">
                                <el-form-item label="机构指标名称" prop="name" :label-width="formLabelWidth">
                                    <el-input v-model="ruleForm.name" style=" height: 40px;" />
                                </el-form-item>
                                <el-form-item label="机构ID" prop="name" :label-width="formLabelWidth">
                                    <el-input v-model="ruleForm.names" disabled="true" style=" height: 40px;" />
                                </el-form-item>
                                <el-form-item label="是否比对" prop="fenzhi" style="margin-left: 60px;">
                                    <el-switch v-model="ruleForm.isenable" />
                                </el-form-item>
                                <el-form-item label="指标单位" prop="fenzhi" :label-width="formLabelWidth">
                                    <el-input v-model="ruleForm.unit" style="height: 40px;" />
                                </el-form-item>
                                <el-form-item label="参考上线" prop="fenzhi" :label-width="formLabelWidth">
                                    <el-input v-model="ruleForm.upper" style=" height: 40px;" />
                                </el-form-item>
                                <el-form-item label="参考下线" prop="fenzhi" :label-width="formLabelWidth">
                                    <el-input v-model="ruleForm.lower" style=" height: 40px;" />
                                </el-form-item>
                            </div>
                            <!-- 右边 -->
                            <div class="ri">
                                <el-form-item label="体检机构：" prop="fenzhi" :label-width="formLabelWidth">
                                    <div class="xiala">
                                        <el-select v-model="ruleForm.Organizationtype" class="m-2" placeholder="全部"
                                            size="small">
                                            <el-option v-for="item in type" :key="item.value" :label="item.label"
                                                :value="item.value" />
                                        </el-select>
                                    </div>
                                </el-form-item>
                            </div>
                        </div>
                        <!-- 下边 -->
                        <div style="width: 780px; height: 120px;margin-left: 60px;">
                            <el-form-item label="正常提示:" prop="fenzhi">
                                <el-input v-model="ruleForm.normal" type="textarea" :rows="6" />
                            </el-form-item>
                        </div>
                        <div style="width: 780px; height: 120px;margin-left: 60px; margin-top: 40px;">
                            <el-form-item label="偏高提示：" prop="fenzhi">
                                <el-input v-model="ruleForm.higher" type="textarea" :rows="6" />
                            </el-form-item>
                        </div>
                        <div style="width: 780px; height: 120px;margin-left: 60px; margin-top: 40px;">
                            <el-form-item label="偏低提示：" prop="fenzhi">
                                <el-input v-model="ruleForm.littler" type="textarea" :rows="6" />
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <template #footer style="margin-top: 30px;">
                    <span class="dialog-footer" v-if="show">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="tianjia">
                            确定
                        </el-button>
                    </span>
                    <span class="dialog-footer1" v-if="show1">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="xiugai">
                            修改
                        </el-button>
                    </span>
                </template>
            </el-dialog>
            <input type="button" value="指标映射">
            <div class="bbc">
                <input type="button" value="删除" @click="del" class="delete">
                <div class="isAffirm" v-show="flagIsAffirm" ref="delManydataOption">
                    <input type="button" value="已勾选数据" @click="delall">
                    <input type="button" value="未勾选数据"  @click="delNoselectData">
                </div>
            </div>
            <input type="button" value="导入">
        </div>
        <div class="gezi">
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" :border="true"
                :highlight-current-row="false" :cell-style="{ 'text-align': 'center', 'fontSize': '12px' }"
                :header-cell-style="{ 'text-align': 'center', 'color': '#666', 'background-color': '#f9gfafc' }"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="53" height="47" />
                <el-table-column label="机构指标ID" width="157" height="47">
                    <template #default="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column property="name" label="机构指标名称" width="175" height="47" />
                <el-table-column property="unit" label="指标单位" width="91" height="47" />
                <el-table-column property="upper" label="参考上限" width="182" height="47" />
                <el-table-column property="lower" label="参考下限" width="110" height="47" />
                <el-table-column property="Cis" label="对应指标标准" width="112" height="47" />
                <el-table-column property="Organizationtype" label="所属机构" width="112" height="47" />
                <el-table-column label="操作" min-width="200" height="47">
                    <template #default="scope">
                        <div style="display: flex;">
                            <el-button size="small" style="border: 0; width: 10px;" text="true"
                                @click="bianji(scope.row.id)">编辑</el-button>
                            <el-popconfirm title="亲，您真的要删除吗?" @confirm="deletes(scope.row.id)">
                                <template #reference>
                                    <el-button type="text" >删除</el-button>
                                </template>
                            </el-popconfirm>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
      <!-- 分页 -->
      <div>
            <div class="demo-pagination-block">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" layout="sizes,slot, prev,pager,next,jumper"
                    background :total="num" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[pageSize, 20,30]">
                    <template #default>  
                        <span class="page1">每页：</span>
                        <span>共{{pages}}页/{{num}}条数据</span>
                    </template>
                </el-pagination>
            </div>
        </div>
</template>

<script setup lang="ts">
import service from "@/utils/service"
import {ElNotification}  from 'element-plus'
import "element-plus/es/components/notification/style/css"
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox, ElDrawer } from 'element-plus'
import { ElTable } from 'element-plus'
import type { AxiosResponse } from 'axios';
// 改input框格式
const formLabelWidth = "180px";
// 表格分页定义
// 当前页
const currentPage = ref(1)
// 每页显示数据条数
const pageSize = ref(10)
// 总数据量
const total = ref(0)
//总共多少页
const pages = ref(parseInt(((total.value / pageSize.value) as unknown) as string) + 1)

const handleSizeChange = (val: number) => {
    console.log(val);
    pageSize.value=val
    getlist()
    pagelist()
}
const handleCurrentChange = (val: number) => {
    console.log(val);
    currentPage.value=val
    getlist()
    pagelist()
}
let num = ref(0)
interface User {
    id: number,
    name: string,
    unit: string,
    upper: string,
    lower: string,
    normal: string,
    higher: string,
    littler: string,
    isenable: boolean,
    Cis: string,
    Organizationtype: string
}
// 定义的保存表格的内容
const tableData = reactive<User[]>([])
// 发请求 获取表格数据
const getlist = async () => {
    let res = await service({
        url: `/InstitutionalIndicators`
    })
    if (res.data) {
        num.value=res.data.length
    }
}
getlist()
// 获取每页十条数据
const pagelist = async () => {
    let res = await service({
        url: `/InstitutionalIndicators`,
        params:{
            _page:currentPage.value,
            _limit:pageSize.value
        }
    })
    if (res.data) {
        // num.value=res.data.length
        tableData.length = 0
        tableData.push(...res.data)
        console.log("tableData", tableData);
    }
}
pagelist()
// 指标映射状态获取
// 是否启用
const types = ref('')
const options = [
    {
        value: true,
        label: '已匹配',
    },
    {
        value: false,
        label: '未匹配'
    }
]
// 点击删除显示删除选项
const flagIsAffirm = ref<boolean>(false)
// 获取
const delManydataOption = ref(null)
// 点击删除显示删除选项
const del = (e: MouseEvent) => {
    // 阻止冒泡
    e.stopPropagation();
    ((delManydataOption.value as unknown) as HTMLElement).style.top = `${e.offsetY}px`;
    ((delManydataOption.value as unknown) as HTMLElement).style.left = `${e.offsetX}px`;
    // 显示删除选项框
    flagIsAffirm.value = true
}
// 隐藏删除选项框
document.onclick = () => {
    flagIsAffirm.value = false
}
// 获取体检机构数据
const jigoleixing = ref('')
interface types {
    value: string,
    label: string
}
const type = reactive<types[]>([])
const gettype = async () => {
    let res = await service({
        url: "/Organizationtype",
    })
    type.length = 0
    res.data.map((item: any) => (
        type.push({
            value: item.type,
            label: item.type
        })
    ));
}
gettype()
// 选中行的数据
const multipleSelection = reactive<User[]>([])
//  表格多选操作
const handleSelectionChange = (val: User[]) => {
    multipleSelection.push(...val)
}
// 删除已选中的
const delall = () => {
    if (multipleSelection.length === 0) {
        ElMessageBox.alert('请先选择数据！', {
            confirmButtonText: '好的'
        }).catch(() => { })
    } else {
        ElMessageBox.confirm(
            '是否确定删除数据？',
            '警告',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            multipleSelection.map(item => {
                service({
                    url: `/InstitutionalIndicators/${item.id}`,
                    method: "delete"
                }).then((res: AxiosResponse) => { })
            })
            tableData.length = 0
            getlist()
            pagelist()
            ElMessage({
                type: 'success',
                message: '删除成功！',
            })
        })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消删除',
                })
            })
    }
}
// 删除单条数据
const deletes = async (id:number) => {
    let res = await service({
        url: `/InstitutionalIndicators/${id}`,
        method:"delete",
    })
    if (res.data) {
    ElNotification({
        title:"提示",
        message: "删除成功",
        type: "success",
    })
    getlist()
    pagelist()
  }
}
// 删除未选中的数据
const delNoselectData = async () => {
    if (multipleSelection.length === 0) {
        ElMessageBox.alert('请先选择数据！', {
            confirmButtonText: '好的'
        }).catch(() => { })
    } else {
        // 未选中的数据(获取未选中)
        let checkedKeys = <number[]>[]
        multipleSelection.forEach(item => {
            checkedKeys.push(item.id)
        })
        let unselectedData = <number[]>[]
        tableData.forEach(item => {
            if (!checkedKeys.includes(item.id)) {
                unselectedData.push(item.id)
            }
        })
        ElMessageBox.confirm(
            '是否确定删除数据？',
            '警告',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(async () => {
                unselectedData.forEach(item => {
                    service({
                        url: `/InstitutionalIndicators/${item}`,
                        method: "delete"
                    })
                })
                tableData.length = 0
                getlist()
                pagelist()
                ElNotification({
                    title: '',
                    dangerouslyUseHTMLString: true,
                    message: '<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" style="width:30x;height:30px;margin-right:5px;"/><strong>删除成功</strong>',
                })

            })
            .catch(() => {
                ElNotification({
                    title: '',
                    dangerouslyUseHTMLString: true,
                    message: '<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" style="width:30x;height:30px;margin-right:5px;"/><strong>取消删除</strong>',
                })
            })
    }
}
// 点击添加的弹出框
const show = ref(true)
const show1 = ref(false)
const dialogFormVisible = ref(false)
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    names: '机构ID自动生成',
    name: "",
    unit: "",
    upper: "",
    lower: "",
    normal: "",
    higher: "",
    littler: "",
    isenable: false,
    Cis: "",
    Organizationtype: "",
    desc: '',
    checked: false
})
// 添加请求
const dialogFormVisible1=()=>{
    dialogFormVisible.value=true
    show.value=true
    show1.value=false
    ruleForm.name = '';
    ruleForm.unit = '';
    ruleForm.upper = '';
    ruleForm.lower = "";
    ruleForm.normal = '';
    ruleForm.higher = '';
    ruleForm.littler = '';
    ruleForm.Organizationtype = '';
    ruleForm.isenable = false
}
const tianjia = async () => {
    dialogFormVisible.value = false
    let res = await service({
        url: `/InstitutionalIndicators`,
        method: "post",
        data: {
            "name": ruleForm.name,
            "unit": ruleForm.unit,
            "upper": ruleForm.upper,
            "lower": ruleForm.lower,
            "normal": ruleForm.normal,
            "higher": ruleForm.higher,
            "littler": ruleForm.littler,
            "iscontrast": ruleForm.isenable,
            "Organizationtype": ruleForm.Organizationtype
        }
    })
    tableData.length = 0
    // 重新渲染页面
    getlist()
    pagelist()
    console.log("tableData", tableData);
    // 清空
    ruleForm.name = '';
    ruleForm.unit = '';
    ruleForm.upper = '';
    ruleForm.lower = "";
    ruleForm.normal = '';
    ruleForm.higher = '';
    ruleForm.littler = '';
    ruleForm.Organizationtype = '';
    ruleForm.isenable = false
}
// 输入框的提示信息
const rules = reactive<FormRules>({
    jigo: [
        { trigger: 'blur' },
        { min: 3, max: 5, trigger: 'blur' },
    ],
    fenzhi: [
        {   trigger: 'blur' },
        { min: 3, max: 5, trigger: 'blur' },
    ],
    name: [
        {   trigger: 'blur' },
        { min: 3, max: 5,  trigger: 'blur' },
    ],
    desc: [
        {  trigger: 'blur' },
        { min: 3, max: 5, trigger: 'blur' },
    ]
})
// 编辑
const bianji = async (id:number)=>{
    show.value=false
    show1.value=true
    dialogFormVisible.value = true
    // 获取所点击表格的数据
    let res = await service({
            url: `/InstitutionalIndicators`,
            method: "get",
            params: {
                id: id
            }
        })
        if (res.data) {
        ruleForm.name=res.data[0].name
         ruleForm.names=res.data[0].id
         ruleForm.isenable=res.data[0].iscontrast
         ruleForm.unit=res.data[0].unit
         ruleForm.upper=res.data[0].upper
         ruleForm.lower=res.data[0].lower
         ruleForm.normal=res.data[0].normal
         ruleForm.higher=res.data[0].higher
         ruleForm.littler=res.data[0].littler
         ruleForm.Organizationtype=res.data[0].Organizationtype
        }
}
// 修改数据
const xiugai = ()=>{
    let res = service({
            url: `/InstitutionalIndicators/${ruleForm.names}`,
            method: "put",
            data: {
                "name": ruleForm.name,
                "iscontrast":ruleForm.isenable,
                "unit":ruleForm.unit,
                "upper": ruleForm.upper,
                "lower": ruleForm.lower,
                "normal": ruleForm.normal,
                "higher":ruleForm.higher,
                "littler": ruleForm.littler,
                "Organizationtype": ruleForm.Organizationtype
            }
        })
        getlist()
        pagelist()
        dialogFormVisible.value = false 
}
// 定义查询类型
const tiaojian = ref('')
// 精确加模糊查询
const inquireabout = async () => {
    if (tiaojian.value != '' && jigoleixing.value != '') {
        let res = await service({
            url: `/InstitutionalIndicators`,
            method: "get",
            params: {
                _page:currentPage.value,
                _limit:pageSize.value,
                "name": tiaojian.value,
                "Organizationtype": jigoleixing.value,
            }
        })
        if (res.data) {
            console.log(res.data);
            tableData.length = 0
            tableData.push(...res.data)
        }
        let ress = await service({
            url: `/InstitutionalIndicators`,
            method: "get",
            params: {
                "name": tiaojian.value,
                "Organizationtype": jigoleixing.value,
            }
        })
        if (res.data) {
            num.value=res.data.length
        }
    } else if (tiaojian.value != '') {
        let res = await service({
            url: `/InstitutionalIndicators`,
            method: "get",
            params: {
                _page:currentPage.value,
                _limit:pageSize.value,
                "name": tiaojian.value
            }
        })
        if (res.data) {
            console.log(res.data);
            tableData.length = 0
            tableData.push(...res.data)
        }
        let ress = await service({
            url: `/InstitutionalIndicators`,
            method: "get",
            params: {
                "name": tiaojian.value
            }
        })
        if (res.data) {
            num.value=res.data.length
        }
    } else if (jigoleixing.value != '') {
        let res = await service({
            url: `/InstitutionalIndicators`,
            method: "get",
            params: {
                _page:currentPage.value,
                _limit:pageSize.value,
                "Organizationtype": jigoleixing.value,
            }
        })
        if (res.data) {
            console.log(res.data);
            tableData.length = 0
            tableData.push(...res.data)
        }
        let ress = await service({
            url: `/InstitutionalIndicators`,
            method: "get",
            params: {
                "Organizationtype": jigoleixing.value,
            }
        })
        if (res.data) {
            num.value=res.data.length
        }
    }else{
        alert('请输入查询条件')
    }
}
// 重置所选的条件
const removecall = () => {
    tiaojian.value = '';
    jigoleixing.value = '';
    getlist()
    pagelist()
}
</script>
<style scoped>
.top {
    width: 100%;
    height: 40px;
    background-color: white;
    font-size: 16px;
    line-height: 40px;
    padding-left: 8px;
}

.box {
    width: 100%;
    height: 122px;
    background-color: white;
    margin-top: 18px;
    padding-left: 8px;
}

.shuju {
    width: 97%;
    height: 50px;
    border: 1px solid #d7d7d7;
    padding-left: 20px;
    line-height: 50px;
    font-size: 14px;
    font-weight: 700;
}

.caozuo {
    width: 97%;
    height: 70px;
    border: 1px solid #d7d7d7;
    padding-left: 20px;
    border-top: 0;
    display: flex;
    overflow: hidden;
}

.xuanze {
    width: 100px;
    height: 35px;
    border: 1px solid #d7d7d7;
    margin-top: 18px;
    border-radius: 5px;
    margin-left: 50px;
}

.el-select {
    border: 1px solid black;
    margin: 5px;
    border-radius: 5px;
}

.right-box .el-button {
    width: 70px;
    height: 35px;
    margin-top: 20px;
    margin-left: 5px;
}

.right-box .reset {
    border: 1px solid #e9e9e9;
    color: #999;
}

.right-box .reset:hover {
    border: 1px solid rgb(0, 121, 254);
    color: rgb(0, 121, 254);
}

.biao {
    width: 100%;
    height: 100%;
    background-color: white;
    padding-left: 8px;
    margin-top: 1px;
    overflow: auto;
}

.biao .anniu {
    margin-top: 10px;
    display: flex;
}

.anniu input {
    width: 81px;
    height: 30px;
    font-size: 13px;
    background-color: white;
    border: 1px solid #d7d7d7;
    margin-left: 10px;
}

.bbc {
    width: 81px;
    height: 30px;
    position: relative;
    margin-right: 10px;
}

.anniu input:hover {
    background-color: #e9e3e3;
}

.gezi {
    width: 98%;
    background-color: white;
    padding-left: 8px;
    margin-top: 10px;
}

/* 删除弹出盒样式 */
.isAffirm {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 90px;
    height: 64px;
    background-color: #fff;
    border: 1px solid #cccccc;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

/* 删除按钮样式 */
.isAffirm input {
    font-size: 12px;
    cursor: pointer;
    width: 77.6px;
    height: 23.6px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    margin-right: 8px;
}

/* 弹出框样式 */
.dialog {
    display: flex;
    width: 1003x;
    box-sizing: border-box;
}

.le {
    width: 500px;
    /* background-color: skyblue; */
    height: 339.92px;
    float: left;
}

.ri {
    width: 500px;
    height: 339.92px;
    /* background-color: skyblue; */
    float: right;
}

.xiala {
    width: 100px;
    height: 40px;
    border: 1px solid #d7d7d7;
    border-radius: 5px;
    margin-left: 5px;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>